<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header-section">
			<view class="header-info">
				<text class="header-title">时段设置</text>
				<text class="header-subtitle">管理可预约的时间段</text>
			</view>
			<view class="header-actions">
				<button class="refresh-btn" @click="fetchTimeSlots">刷新</button>
				<button class="back-btn" @click="goBack">返回</button>
			</view>
		</view>

		<!-- 自定义时段设置 -->
		<view class="custom-setup">
			<text class="section-title">自定义时段</text>
			<view class="custom-options">
				<view class="option-group">
					<text class="option-label">时段类型</text>
					<view class="option-buttons">
						<button 
							class="option-btn" 
							:class="{ active: customType === 'single' }"
							@click="customType = 'single'"
						>单个时段</button>
						<button 
							class="option-btn" 
							:class="{ active: customType === 'batch' }"
							@click="customType = 'batch'"
						>批量时段</button>
					</view>
				</view>
				
				<!-- 单个时段设置表单优化 -->
				<view v-if="customType === 'single'" class="single-time-setup">
					<view class="form-row">
						<view class="input-group">
							<text class="input-label">日期</text>
							<picker 
								class="date-picker" 
								mode="date" 
								:value="newTimeSlot.date"
								@change="onDateChange"
							>
								<view class="picker-text">{{ newTimeSlot.date || '选择日期' }}</view>
							</picker>
						</view>
						<view class="input-group">
							<text class="input-label">开始时间</text>
							<picker 
								class="time-picker" 
								mode="time" 
								:value="newTimeSlot.startTime"
								@change="onStartTimeChange"
							>
								<view class="picker-text">{{ newTimeSlot.startTime || '选择时间' }}</view>
							</picker>
						</view>
						<view class="input-group">
							<text class="input-label">结束时间</text>
							<picker 
								class="time-picker" 
								mode="time" 
								:value="newTimeSlot.endTime"
								@change="onEndTimeChange"
							>
								<view class="picker-text">{{ newTimeSlot.endTime || '选择时间' }}</view>
							</picker>
						</view>
					</view>
					<view class="duration-info">
						<text class="duration-text">时长: {{ getDuration() }}分钟</text>
					</view>
					<button class="add-btn" @click="addTimeSlot">添加时段</button>
				</view>
				
				<!-- 批量时段设置表单优化 -->
				<view v-if="customType === 'batch'" class="batch-time-setup">
					<view class="form-row">
						<view class="input-group">
							<text class="input-label">日期</text>
							<picker 
								class="date-picker" 
								mode="date" 
								:value="batchConfig.date"
								@change="onBatchDateChange"
							>
								<view class="picker-text">{{ batchConfig.date || '选择日期' }}</view>
							</picker>
						</view>
						<view class="input-group">
							<text class="input-label">开始时间</text>
							<picker 
								class="time-picker" 
								mode="time" 
								:value="batchConfig.startTime"
								@change="onBatchStartTimeChange"
							>
								<view class="picker-text">{{ batchConfig.startTime || '选择时间' }}</view>
							</picker>
						</view>
						<view class="input-group">
							<text class="input-label">结束时间</text>
							<picker 
								class="time-picker" 
								mode="time" 
								:value="batchConfig.endTime"
								@change="onBatchEndTimeChange"
							>
								<view class="picker-text">{{ batchConfig.endTime || '选择时间' }}</view>
							</picker>
						</view>
					</view>
					<view class="form-row">
						<view class="input-group">
							<text class="input-label">时段长度</text>
							<picker 
								class="duration-picker" 
								mode="selector" 
								:range="durationOptions"
								:value="batchConfig.durationIndex"
								@change="onDurationChange"
							>
								<view class="picker-text">{{ durationOptions[batchConfig.durationIndex] }}分钟</view>
							</picker>
						</view>
					</view>
					<view class="batch-preview">
						<text class="preview-title">预览时段</text>
						<view class="preview-slots">
							<view class="preview-slot" v-for="slot in previewSlots" :key="slot.id">
								<text class="preview-time">{{ slot.startTime }} - {{ slot.endTime }}</text>
							</view>
						</view>
					</view>
					<button class="add-btn" @click="addBatchTimeSlots">批量添加</button>
				</view>
			</view>
		</view>

		<!-- 时段列表 -->
		<view class="time-slot-list">
			<view class="list-header">
				<text class="section-title">现有时段</text>
				<view class="list-actions">
					<text class="slot-count">共 {{ timeSlots.length }} 个时段</text>
					<button class="action-btn danger" @click="clearAllTimeSlots">清空所有</button>
				</view>
			</view>
			<view class="slot-list">
				<view class="time-slot-item" v-for="slot in timeSlots" :key="slot.id">
					<view class="slot-info">
						<text class="slot-date">{{ slot.date }}</text>
						<text class="slot-time">{{ slot.startTime }} - {{ slot.endTime }}</text>
						<text class="slot-duration">{{ getSlotDuration(slot) }}分钟</text>
						<text class="slot-status" :class="slot.status">{{ slot.status === 'available' ? '可用' : '已占用' }}</text>
					</view>
					<view class="slot-actions">
						<button class="edit-btn" @click="editTimeSlot(slot)">编辑</button>
						<button class="delete-btn" @click="deleteTimeSlot(slot.id)">删除</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 编辑时段弹窗 -->
		<view class="modal-overlay" v-if="showEditModal" @click="closeEditModal">
			<view class="modal-content edit-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">编辑时段</text>
					<view class="close-btn" @click="closeEditModal">
						<text class="close-icon">×</text>
					</view>
				</view>

				<view class="modal-body">
					<!-- 编辑弹窗表单优化 -->
					<view class="edit-form">
						<view class="form-row">
							<view class="input-group">
								<text class="input-label">日期</text>
								<picker 
									class="date-picker" 
									mode="date" 
									:value="editingSlot.date"
									@change="onEditDateChange"
								>
									<view class="picker-text">{{ editingSlot.date }}</view>
								</picker>
							</view>
							<view class="input-group">
								<text class="input-label">开始时间</text>
								<picker 
									class="time-picker" 
									mode="time" 
									:value="editingSlot.startTime"
									@change="onEditStartTimeChange"
								>
									<view class="picker-text">{{ editingSlot.startTime }}</view>
								</picker>
							</view>
							<view class="input-group">
								<text class="input-label">结束时间</text>
								<picker 
									class="time-picker" 
									mode="time" 
									:value="editingSlot.endTime"
									@change="onEditEndTimeChange"
								>
									<view class="picker-text">{{ editingSlot.endTime }}</view>
								</picker>
							</view>
						</view>
						<view class="duration-info">
							<text class="duration-text">时长: {{ getEditDuration() }}分钟</text>
						</view>
					</view>
					<view class="edit-actions">
						<button class="cancel-btn" @click="closeEditModal">取消</button>
						<button class="save-btn" @click="saveEditTimeSlot">保存</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { API_CONFIG, getApiUrl, apiRequest } from '@/config/api.js'
export default {
	data() {
		return {
			showEditModal: false,
			timeSlots: [],
			newTimeSlot: {
				date: '',
				startTime: '',
				endTime: ''
			},
			editingSlot: {
				id: null,
				date: '',
				startTime: '',
				endTime: ''
			},
			customType: 'single', // 'single' or 'batch'
			batchConfig: {
				date: '',
				startTime: '',
				endTime: '',
				durationIndex: 0
			},
			durationOptions: [30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360],
			selectedDate: '', // 新增
		}
	},
	computed: {
		previewSlots() {
			const startTime = this.batchConfig.startTime;
			const endTime = this.batchConfig.endTime;
			const duration = this.durationOptions[this.batchConfig.durationIndex];
			const slots = [];
			if (!startTime || !endTime || duration === undefined) {
				return slots;
			}
			let currentTime = startTime;
			while (this.addMinutesToTime(currentTime, duration) <= endTime) {
				const nextTime = this.addMinutesToTime(currentTime, duration);
				slots.push({
					id: Date.now() + slots.length,
					startTime: currentTime,
					endTime: nextTime
				});
				currentTime = nextTime;
			}
			return slots;
		},
		availableCount() {
			return this.timeSlots.filter(slot => slot.status === 'available').length;
		}
	},
	onLoad() {
		// 获取所有时段数据
		this.fetchTimeSlots()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		
		onStartTimeChange(e) {
			this.newTimeSlot.startTime = e.detail.value
		},
		
		onEndTimeChange(e) {
			this.newTimeSlot.endTime = e.detail.value
		},
		
		onBatchStartTimeChange(e) {
			this.batchConfig.startTime = e.detail.value;
		},

		onBatchEndTimeChange(e) {
			this.batchConfig.endTime = e.detail.value;
		},

		onDurationChange(e) {
			this.batchConfig.durationIndex = e.detail.value;
		},
		
		getTodayStr() {
			const today = new Date()
			return `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`
		},
		async fetchTimeSlots() {
			try {
				console.log('=== 开始获取时段数据 ===')
				
				// 方法1：尝试不带任何参数获取所有时段
				try {
					console.log('尝试方法1：不带参数获取所有时段')
					const res1 = await apiRequest({
						url: getApiUrl(API_CONFIG.ENDPOINTS.TIME_SLOT),
						method: 'GET'
					})
					
					if ((res1.code === 0 || res1.code === 200) && Array.isArray(res1.data)) {
						console.log('方法1成功，获取到数据:', res1.data)
						this.processTimeSlotsData(res1.data)
						return
					}
				} catch (e) {
					console.log('方法1失败:', e.message)
				}
				
				// 方法2：获取未来30天的所有时段
				console.log('尝试方法2：获取未来30天的所有时段')
				const dates = []
				for (let i = 0; i < 30; i++) {
					const date = new Date()
					date.setDate(date.getDate() + i)
					dates.push(date.toISOString().split('T')[0])
				}
				
				// 并行获取所有日期的时段
				const promises = dates.map(date => 
					apiRequest({
						url: getApiUrl(API_CONFIG.ENDPOINTS.TIME_SLOT) + '?date=' + date,
						method: 'GET'
					}).catch(e => {
						console.log(`获取日期 ${date} 的时段失败:`, e.message)
						return { code: 0, data: [] }
					})
				)
				
				const results = await Promise.all(promises)
				
				// 合并所有时段的响应
				let allSlots = []
				results.forEach((res, index) => {
					if ((res.code === 0 || res.code === 200) && Array.isArray(res.data)) {
						const slotsWithDate = res.data.map(slot => ({
							...slot,
							date: dates[index] // 确保每个时段都有正确的日期
						}))
						allSlots = allSlots.concat(slotsWithDate)
					}
				})
				
				console.log('方法2完成，总共获取到时段数:', allSlots.length)
				this.processTimeSlotsData(allSlots)
				
			} catch (e) {
				console.error('获取时段失败:', e)
				console.error('错误详情:', e.message)
				this.timeSlots = []
				uni.showToast({ title: '获取时段失败', icon: 'none' })
			}
		},
		
		// 处理时段数据的辅助方法
		processTimeSlotsData(data) {
			if (Array.isArray(data) && data.length > 0) {
				// 适配后端数据
				this.timeSlots = data.map(slot => ({
					...slot,
					status: slot.status === 1 ? 'available' : (slot.status === 2 ? 'booked' : 'other'),
					startTime: slot.startTime ? slot.startTime.slice(0, 5) : '',
					endTime: slot.endTime ? slot.endTime.slice(0, 5) : ''
				}))
				console.log('处理后的时段数据:', this.timeSlots)
			} else {
				console.log('没有获取到时段数据，设置为空数组')
				this.timeSlots = []
			}
		},
		async addTimeSlot() {
			if (!this.newTimeSlot.date || !this.newTimeSlot.startTime || !this.newTimeSlot.endTime) {
				uni.showToast({ title: '请选择日期和时间', icon: 'none' });
				return;
			}
			if (!this.validateTimeSlot(this.newTimeSlot.startTime, this.newTimeSlot.endTime)) {
				uni.showToast({ title: '结束时间必须晚于开始时间', icon: 'none' });
				return;
			}
			try {
				await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.TIME_SLOT),
					method: 'POST',
					data: { ...this.newTimeSlot }
				})
				uni.showToast({ title: '时段添加成功', icon: 'success' })
				this.selectedDate = this.newTimeSlot.date
				this.fetchTimeSlots()
				this.newTimeSlot = { date: this.selectedDate, startTime: '', endTime: '' }
			} catch (e) {
				uni.showToast({ title: '添加失败', icon: 'none' })
			}
		},
		async deleteTimeSlot(id) {
			try {
				await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.TIME_SLOT) + '/' + id,
					method: 'DELETE'
				})
				uni.showToast({ title: '时段删除成功', icon: 'success' })
				this.fetchTimeSlots()
			} catch (e) {
				uni.showToast({ title: '删除失败', icon: 'none' })
			}
		},
		editTimeSlot(slot) {
			this.editingSlot = { ...slot }
			this.showEditModal = true
		},
		closeEditModal() {
			this.showEditModal = false
			this.editingSlot = { id: null, date: '', startTime: '', endTime: '' }
		},
		onEditStartTimeChange(e) {
			this.editingSlot.startTime = e.detail.value
		},
		onEditEndTimeChange(e) {
			this.editingSlot.endTime = e.detail.value
		},
		async saveEditTimeSlot() {
			if (!this.editingSlot.date || !this.editingSlot.startTime || !this.editingSlot.endTime) {
				uni.showToast({ title: '请选择日期和时间', icon: 'none' });
				return;
			}
			if (!this.validateTimeSlot(this.editingSlot.startTime, this.editingSlot.endTime)) {
				uni.showToast({ title: '结束时间必须晚于开始时间', icon: 'none' });
				return;
			}
			try {
				// 使用正确的PUT请求格式：PUT /api/time-slot/{id}
				await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.TIME_SLOT) + '/' + this.editingSlot.id,
					method: 'PUT',
					data: { 
						date: this.editingSlot.date,
						startTime: this.editingSlot.startTime,
						endTime: this.editingSlot.endTime
					}
				})
				this.showEditModal = false
				uni.showToast({ title: '时段编辑成功', icon: 'success' })
				this.fetchTimeSlots()
			} catch (e) {
				console.error('编辑时段失败:', e)
				uni.showToast({ title: '编辑失败', icon: 'none' })
			}
		},
		async clearAllTimeSlots() {
			uni.showModal({
				title: '确认清空',
				content: '确定要清空所有时段吗？此操作不可恢复。',
				success: async (res) => {
					if (res.confirm) {
						try {
							// 批量删除所有时段
							for (const slot of this.timeSlots) {
								await apiRequest({
									url: getApiUrl(API_CONFIG.ENDPOINTS.TIME_SLOT) + '/' + slot.id,
									method: 'DELETE'
								})
							}
							uni.showToast({ title: '所有时段已清空', icon: 'success' })
							this.fetchTimeSlots()
						} catch (e) {
							uni.showToast({ title: '清空失败', icon: 'none' })
						}
					}
				}
			})
		},
		// 其余辅助函数保持不变
		getDuration() {
			if (!this.newTimeSlot.startTime || !this.newTimeSlot.endTime) {
				return '0'
			}
			return this.calculateDuration(this.newTimeSlot.startTime, this.newTimeSlot.endTime)
		},
		getSlotDuration(slot) {
			return this.calculateDuration(slot.startTime, slot.endTime)
		},
		getEditDuration() {
			if (!this.editingSlot.startTime || !this.editingSlot.endTime) {
				return '0'
			}
			return this.calculateDuration(this.editingSlot.startTime, this.editingSlot.endTime)
		},
		addBatchTimeSlots() {
			// 可选：批量添加时段，循环调用addTimeSlot
			// 这里建议后端支持批量接口，否则循环调用POST
			const duration = this.durationOptions[this.batchConfig.durationIndex];
			if (!this.batchConfig.date || !this.batchConfig.startTime || !this.batchConfig.endTime || duration === undefined) {
				uni.showToast({ title: '请完善批量信息', icon: 'none' });
				return;
			}
			let currentTime = this.batchConfig.startTime;
			const endTime = this.batchConfig.endTime;
			let addedCount = 0;
			const addPromises = [];
			while (this.addMinutesToTime(currentTime, duration) <= endTime) {
				const nextTime = this.addMinutesToTime(currentTime, duration);
				addPromises.push(apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.TIME_SLOT),
					method: 'POST',
					data: {
						date: this.batchConfig.date,
						startTime: currentTime,
						endTime: nextTime
					}
				}))
				addedCount++;
				currentTime = nextTime;
			}
			Promise.all(addPromises).then(() => {
				uni.showToast({ title: `成功添加 ${addedCount} 个时段`, icon: 'success' });
				this.fetchTimeSlots();
				this.batchConfig = { date: '', startTime: '', endTime: '', durationIndex: 0 };
			});
		},
		addMinutesToTime(timeStr, minutes) {
			const [hours, mins] = timeStr.split(':').map(Number);
			const totalMinutes = hours * 60 + mins + minutes;
			const newHours = Math.floor(totalMinutes / 60);
			const newMins = totalMinutes % 60;
			return `${String(newHours).padStart(2, '0')}:${String(newMins).padStart(2, '0')}`;
		},
		validateTimeSlot(startTime, endTime) {
			const start = new Date(`2000-01-01 ${startTime}`);
			const end = new Date(`2000-01-01 ${endTime}`);
			return end > start;
		},
		checkTimeSlotOverlap(newSlot, existingSlots) {
			return existingSlots.some(slot =>
				slot.date === newSlot.date &&
				new Date(`2000-01-01 ${newSlot.startTime}`) < new Date(`2000-01-01 ${slot.endTime}`) &&
				new Date(`2000-01-01 ${newSlot.endTime}`) > new Date(`2000-01-01 ${slot.startTime}`)
			);
		},
		calculateDuration(startTime, endTime) {
			const start = new Date(`2000-01-01 ${startTime}`);
			const end = new Date(`2000-01-01 ${endTime}`);
			const diffInMinutes = (end - start) / (1000 * 60);
			return Math.round(diffInMinutes);
		},
		onDateChange(e) {
			this.newTimeSlot.date = e.detail.value;
		},
		onBatchDateChange(e) {
			this.batchConfig.date = e.detail.value;
		},
		onEditDateChange(e) {
			this.editingSlot.date = e.detail.value;
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
	padding: 40rpx;
}

.header-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50rpx;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
	
	.header-info {
		.header-title {
			display: block;
			font-size: 52rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 12rpx;
			background: linear-gradient(135deg, #FFFFFF 0%, #E3F2FD 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		
		.header-subtitle {
			font-size: 28rpx;
			color: #AAB4BE;
			opacity: 0.8;
		}
	}
	
	.header-actions {
		display: flex;
		gap: 16rpx;
		
		.refresh-btn {
			background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
			border: none;
			color: #FFFFFF;
			font-size: 28rpx;
			padding: 16rpx 32rpx;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.3);
			transition: all 0.3s ease;
			
			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
			}
		}
		
		.back-btn {
			background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
			border: none;
			color: #FFFFFF;
			font-size: 28rpx;
			padding: 16rpx 32rpx;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(25, 118, 210, 0.3);
			transition: all 0.3s ease;
			
			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.4);
			}
		}
	}
}

.section-title {
	display: block;
	font-size: 36rpx;
	color: #FFFFFF;
	font-weight: 600;
	margin-bottom: 30rpx;
	position: relative;
	
	&::after {
		content: '';
		position: absolute;
		bottom: -8rpx;
		left: 0;
		width: 60rpx;
		height: 4rpx;
		background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
		border-radius: 2rpx;
	}
}

.custom-setup {
	background: rgba(255, 255, 255, 0.05);
	border: 1rpx solid rgba(255, 255, 255, 0.1);
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	backdrop-filter: blur(10rpx);
	
	.custom-options {
		.option-group {
			margin-bottom: 40rpx;
			
			.option-label {
				display: block;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-bottom: 20rpx;
				font-weight: 500;
			}
			
			.option-buttons {
				display: flex;
				gap: 20rpx;
				
				.option-btn {
					flex: 1;
					background: rgba(255, 255, 255, 0.1);
					border: 1rpx solid rgba(255, 255, 255, 0.2);
					color: #AAB4BE;
					font-size: 28rpx;
					padding: 20rpx;
					border-radius: 12rpx;
					transition: all 0.3s ease;
					
					&.active {
						background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
						border-color: #1976D2;
						color: #FFFFFF;
						box-shadow: 0 4rpx 16rpx rgba(25, 118, 210, 0.3);
					}
				}
			}
		}
	}
}

.single-time-setup, .batch-time-setup {
	.form-row {
		display: flex;
		gap: 16rpx;
		margin-bottom: 20rpx;
		align-items: flex-end;
		
		.input-group {
			flex: 1;
			min-width: 0;
			
			.input-label {
				display: block;
				font-size: 24rpx;
				color: #AAB4BE;
				margin-bottom: 8rpx;
				font-weight: 500;
			}
			
			.date-picker, .time-picker, .duration-picker {
				background: rgba(255, 255, 255, 0.08);
				border: 1rpx solid rgba(255, 255, 255, 0.15);
				border-radius: 12rpx;
				padding: 16rpx 12rpx;
				transition: all 0.3s ease;
				position: relative;
				
				&:active {
					border-color: #1976D2;
					background: rgba(25, 118, 210, 0.1);
					box-shadow: 0 0 0 2rpx rgba(25, 118, 210, 0.2);
				}
				
				.picker-text {
					color: #FFFFFF;
					font-size: 26rpx;
					text-align: center;
					font-weight: 500;
				}
			}
		}
	}
	
	.duration-info {
		text-align: center;
		margin-bottom: 24rpx;
		
		.duration-text {
			font-size: 24rpx;
			color: #4CAF50;
			font-weight: 500;
			background: rgba(76, 175, 80, 0.1);
			padding: 8rpx 16rpx;
			border-radius: 8rpx;
			border: 1rpx solid rgba(76, 175, 80, 0.2);
		}
	}
	
	.add-btn {
		width: 100%;
		background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
		border: none;
		color: #FFFFFF;
		font-size: 28rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.3);
		transition: all 0.3s ease;
		font-weight: 600;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
		}
	}
}

.batch-preview {
	background: rgba(76, 175, 80, 0.06);
	border: 1rpx solid rgba(76, 175, 80, 0.15);
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 24rpx;
	
	.preview-title {
		display: block;
		font-size: 26rpx;
		color: #FFFFFF;
		margin-bottom: 16rpx;
		font-weight: 600;
	}
	
	.preview-slots {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(120rpx, 1fr));
		gap: 8rpx;
		
		.preview-slot {
			background: rgba(76, 175, 80, 0.15);
			border: 1rpx solid rgba(76, 175, 80, 0.25);
			border-radius: 8rpx;
			padding: 8rpx 12rpx;
			text-align: center;
			
			.preview-time {
				font-size: 22rpx;
				color: #4CAF50;
				font-weight: 500;
			}
		}
	}
}

.time-slot-list {
	background: rgba(255, 255, 255, 0.05);
	border: 1rpx solid rgba(255, 255, 255, 0.1);
	border-radius: 20rpx;
	padding: 40rpx;
	backdrop-filter: blur(10rpx);
	
	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.list-actions {
			display: flex;
			align-items: center;
			gap: 16rpx;
			
			.slot-count {
				font-size: 26rpx;
				color: #AAB4BE;
			}
			
			.action-btn {
				background: rgba(255, 255, 255, 0.1);
				border: 1rpx solid rgba(255, 255, 255, 0.2);
				color: #FFFFFF;
				font-size: 24rpx;
				padding: 12rpx 20rpx;
				border-radius: 8rpx;
				transition: all 0.3s ease;
				
				&.danger {
					background: rgba(244, 67, 54, 0.2);
					border-color: rgba(244, 67, 54, 0.3);
					color: #FF5252;
				}
				
				&:active {
					transform: translateY(1rpx);
				}
			}
		}
	}
	
	.slot-list {
		.time-slot-item {
			background: #181d2a;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 8rpx rgba(25,118,210,0.06);
			margin-bottom: 16rpx;
			padding: 20rpx 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: all 0.3s ease;
			
			&:hover {
				background: rgba(255, 255, 255, 0.12);
				transform: translateY(-2rpx);
				box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
			}
			
			.slot-info {
				flex: 1;
				.slot-date {
					display: block;
					font-size: 24rpx;
					color: #AAB4BE;
					margin-bottom: 8rpx;
				}
				.slot-time {
					display: block;
					font-size: 30rpx;
					color: #FFFFFF;
					font-weight: 600;
					margin-bottom: 8rpx;
				}
				
				.slot-duration {
					font-size: 24rpx;
					color: #AAB4BE;
					margin-right: 16rpx;
				}
				
				.slot-status {
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 6rpx;
					
					&.available {
						background: rgba(76, 175, 80, 0.2);
						color: #4CAF50;
					}
					
					&.booked {
						background: rgba(255, 152, 0, 0.2);
						color: #FF9800;
					}
				}
			}
			
			.slot-actions {
				display: flex;
				gap: 8rpx;
				
				.edit-btn {
					background: #1976D2;
					color: #fff;
					border-radius: 8rpx;
					padding: 8rpx 16rpx;
					font-size: 24rpx;
				}
				
				.delete-btn {
					background: #fff0f0;
					color: #f44336;
					border-radius: 8rpx;
					padding: 8rpx 16rpx;
					font-size: 24rpx;
				}
				
				.edit-btn:active, .delete-btn:active {
					transform: translateY(1rpx);
				}
			}
		}
	}
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	backdrop-filter: blur(10rpx);
	
	.modal-content {
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		width: 80%;
		max-width: 600rpx;
		box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.5);
		
		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 40rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
			
			.modal-title {
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 600;
			}
			
			.close-btn {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.1);
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				
				.close-icon {
					font-size: 32rpx;
					color: #AAB4BE;
				}
				
				&:active {
					background: rgba(255, 255, 255, 0.2);
				}
			}
		}
		
		.modal-body {
			padding: 40rpx;
			
			.edit-form {
				margin-bottom: 40rpx;
				
				.form-row {
					display: flex;
					gap: 16rpx;
					margin-bottom: 20rpx;
					align-items: flex-end;
					
					.input-group {
						flex: 1;
						min-width: 0;
						
						.input-label {
							display: block;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-bottom: 8rpx;
							font-weight: 500;
						}
						
						.date-picker, .time-picker {
							background: rgba(255, 255, 255, 0.08);
							border: 1rpx solid rgba(255, 255, 255, 0.15);
							border-radius: 12rpx;
							padding: 16rpx 12rpx;
							
							.picker-text {
								color: #FFFFFF;
								font-size: 26rpx;
								text-align: center;
								font-weight: 500;
							}
						}
					}
				}
				
				.duration-info {
					text-align: center;
					margin-bottom: 24rpx;
					
					.duration-text {
						font-size: 24rpx;
						color: #4CAF50;
						font-weight: 500;
						background: rgba(76, 175, 80, 0.1);
						padding: 8rpx 16rpx;
						border-radius: 8rpx;
						border: 1rpx solid rgba(76, 175, 80, 0.2);
					}
				}
			}
			
			.edit-actions {
				display: flex;
				gap: 20rpx;
				
				.cancel-btn, .save-btn {
					flex: 1;
					font-size: 28rpx;
					padding: 20rpx;
					border-radius: 12rpx;
					border: none;
					transition: all 0.3s ease;
				}
				
				.cancel-btn {
					background: rgba(255, 255, 255, 0.1);
					color: #AAB4BE;
					border: 1rpx solid rgba(255, 255, 255, 0.2);
				}
				
				.save-btn {
					background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
					color: #FFFFFF;
					box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.3);
				}
				
				.cancel-btn:active, .save-btn:active {
					transform: translateY(2rpx);
				}
			}
		}
	}
}

// 响应式适配
@media (max-width: 600px) {
	.form-row {
		flex-direction: column;
		gap: 12rpx;
		
		.input-group {
			width: 100%;
		}
	}
}
</style> 